<template>
  <div class="user-profile">
    <div class="avatar-section">
          <div class="avatar-change-button" @click="changeAvatar">
            <image v-if="id" src="/static/tx.jpg" style="width: 220rpx;height: 220rpx;border-radius: 50%" mode="aspectFill"></image>
            <image v-else src="/static/tx.jpg" style="width: 220rpx;height: 220rpx;border-radius: 50%" mode="aspectFill"></image>
          </div>
		  </div>

    <div class="info-item">
      <label>姓名：</label>
      <input
          v-model="name"
          placeholder="请输入姓名"
          :border="false"
      />
    </div>
	
    <div class="info-item">
      <label>性别：</label>
      <input
          v-model="sex"
          placeholder="请输入性别"
          :border="false"
      />
    </div>
	
    <div class="info-item">
      <label>学号：</label>
      <input
          v-model="card"
          placeholder="请输入学号"
          :border="false"
      />
    </div>


    <div class="info-item">
      <label>学校：</label>
      <input
          v-model="school"
          placeholder="请输入学校"
          :border="false"
      />
    </div>
    <div class="info-item">
      <label>年级：</label>
      <input
          v-model="grade"
          placeholder="请输入年级"
          :border="false"
      />
    </div>
    <div class="info-item">
      <label>专业：</label>
      <input
          v-model="major"
          placeholder="请输入专业"
          :border="false"
      />
    </div>
    <div @click="show = true" class="info-item">
      <label>班级：</label>
      <div>{{classilabel}}</div>
    </div>

<!--    <div class="info-item">-->
<!--      <label>班级：</label>-->
<!--      <van-field-->
<!--          v-model="user.school"-->
<!--          placeholder="请输入班级"-->
<!--          :border="false"-->
<!--      />-->
<!--    </div>-->

    <div class="actions">
      <button style="background-color: #0AD192 " @click="changePassword">确认修改</button>
    </div>
    <van-popup
        :show="show"
        position="bottom"
        custom-style="height: 50%;"
        @close="show = false"
    >
      <van-picker
          show-toolbar
          value-key="name"
          :columns="columns"
          @confirm="action"
          @cancel="show = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import * as Api from "/api/user";
import { onLoad} from '@dcloudio/uni-app'
let columns =  ref()
function fit(e) {
  columns.value.filter((item) => {
    if (item.id === e){
      classilabel.value = item.name
      console.log(123)
      return true
    }
  })
}
import {getClass, putInfo} from "/api/user";
onLoad(async ()=>{
  let res = await Api.getInfo(uni.getStorageSync('userId').split(" ")[0])
  let res1 = await Api.getClass()
  name.value = res.data.name
  sex.value = res.data.gender
  card.value = res.data.idCard
  school.value = res.data.college
  major.value = res.data.major
  classi.value = res.data.classId
  grade.value = res.data.grade
  columns.value = res1.data
  fit(classi.value)
})
let name = ref()
let sex = ref()
let card = ref()
let school = ref()
let major = ref()
let grade = ref()
let classi = ref()
let classilabel = ref()
let show = ref(false)

const action = (e) => {
  classi.value= e.detail.value.id
  classilabel.value = e.detail.value.name
  show.value = false
};


const changePassword = () => {
  Api.putInfo(uni.getStorageSync('userId').split(" ")[0],{
    name:name.value,
    gender:sex.value,
    idCard:card.value,
    college:school.value,
    major:major.value,
    grade:grade.value,
    classId:classi.value,
  })

};
</script>

<style scoped>
.user-profile {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.avatar-section {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.info-item label {
  font-weight: bold;
  margin-right: 10px;
  min-width: 60px;
}

.info-item span {
  flex: 1;
  margin-right: 10px;
}

button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.actions {
  text-align: center;
  margin-top: 20px;
}
.avatar-edit-icon{
	width: 20px;
	height: 20px;
}
</style>